<template>
    <div class="login-page">
        <div class="login-container">
            <h1>登录页面</h1>
            <el-form :model="loginModel" ref="form" :rules="rules" label-width="80px" :inline="false" size="normal">
                <el-form-item prop="userName" label="用户名">
                    <el-input v-model="loginModel.userName" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item prop="password" label="密码">
                    <el-input v-model="loginModel.password" type="password" placeholder="请输入密码"
                        show-password></el-input>
                </el-form-item>

                <el-form-item prop="code">
                    <el-row :gutter="10">
                        <el-col :span="16">
                            <el-input placeholder="请输入验证码" v-model="loginModel.code"></el-input>
                        </el-col>
                        <el-col :span="8">
                            <img :src="imgUrl" @click="getCaptcha" />
                        </el-col>
                    </el-row>

                </el-form-item>
                <el-form-item>

                    <el-button type="primary" @click="onSubmit" style="width: 100%">登录</el-button>
                </el-form-item>


            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { FormInstance } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';
import { getCaptchaApi, loginApi } from '@/api/sysuser/index';
import { loginStore } from '@/store/sysuser/index';
import { useRouter } from 'vue-router';
// 使用vue-router 跳转到首页
const router = useRouter();
// 使用pinia存储登录的userId 等用户数据
const loginstore = loginStore();
const loginModel = reactive({
    userName: '',
    password: '',
    code: ''
});
const imgUrl = ref('');
const form = ref<FormInstance>();
const rules = reactive({
    userName: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 10, message: '用户名长度在 3 到 10 个字符', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 3, max: 16, message: '密码长度在 3 到 16 个字符', trigger: 'blur' }
    ],
    code: [
        { required: true, message: '请输入验证码', trigger: 'blur' },
        { min: 4, max: 4, message: '验证码长度为 4', trigger: 'blur' }
    ]
});
// getCaptchaApi
const getCaptcha = async () => {
    // 调用获取验证码 API
    let res = await getCaptchaApi();
    if (res && res.code === 200) {
        console.log(res);
        imgUrl.value = res.data;
        console.log(imgUrl.value);

    }
};

// 登录 API
const onSubmit = () => {
    console.log('用户名:', loginModel.userName);
    console.log('密码:', loginModel.password);
    console.log('验证码:', loginModel.code);
    // 调用登录 API
    form.value?.validate(async (valid: boolean) => {
        if (valid) {
            try {
                let res = await loginApi(loginModel);
                if (res && res.code === 200) {
                    console.log('登录成功', res);
                    loginstore.setuserId(res.data.userId);
                    router.push({ path: '/home' })
                    // 处理登录成功逻辑
                } else {
                    console.error('登录失败', res);
                    // 显示错误消息
                }
            } catch (error) {
                console.error('请求失败', error);
                // 显示错误消息
            }
        }
    });
};

onMounted(() => {
    getCaptcha();
});
</script>

<style langd="scss" scoped>
/* 设置页面背景色为深蓝色 */
.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    /* 使页面占满整个视口高度 */
    background-color: #1a1a2e;
    /* 深蓝色背景 */
}

/* 登录框样式 */
.login-container {
    max-width: 500px;
    width: 100%;
    padding: 40px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #ffffff;
    /* 白色背景 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    /* 添加阴影 */
}

h1 {
    text-align: center;
    margin-bottom: 20px;
    color: #1a1a2e;
    /* 深蓝色标题 */
}

/* 调整 Element Plus 表单样式 */
.el-form-item {
    margin-right: 40px;
    margin-bottom: 20px;
}

.el-form-item__label {
    color: #1a1a2e;
    /* 深蓝色文字 */
    font-weight: bold;
}

.el-input {
    width: 100%;
}

.el-button {
    width: 100%;
    background-color: #6a5acd;
    /* 紫色按钮 */
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
}

.el-button:hover {
    background-color: #483d8b;
    /* 按钮悬停效果 */
}

img {
    height: 32px;
    width: 100%;
    cursor: pointer;
}
</style>